<template>
	<view class="">
		<movable-area class="movableArea">
		 <movable-view class="movableView" :x="x" :y="y" :position="position" direction="all" :damping="30"  :friction="300"
			  @change.stop="onChange" @touchend="onTouchend">
		<view class="uni-cursor-point scroll-list">
			<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
		    'uni-fab--leftBottom': leftBottom,
		    'uni-fab--rightBottom': rightBottom,
		    'uni-fab--leftTop': leftTop,
		    'uni-fab--rightTop': rightTop,
			'uni-fab-shadow':suspensionChage
		  }" class="uni-fab" :style="nvueBottom">
				<view :class="{
		      'uni-fab__content--left': horizontal === 'left',
		      'uni-fab__content--right': horizontal === 'right',
		      'uni-fab__content--flexDirection': direction === 'vertical',
		      'uni-fab__content--flexDirectionStart': flexDirectionStart,
		      'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
			  'uni-fab__content--other-platform': !isAndroidNvue
		    }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: suspensionChage?styles.backgroundColor:styles.buttonColors }"
					class="uni-fab__content" elevation="5">
					<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
					<view :class="{ 'uni-fab__item--active': isShow }"
						class="uni-fab__item" @click.stop="home()">
						<image src="https://pic.bangbangtongcheng.com/static/LevitationBall/home.png" class="uni-fab__item-image"
							mode="aspectFit" />
						<text style="color: #333;" class="uni-fab__item-text">回首页</text>
					</view>
					<scroll-view scroll-y="true" @touchmove.stop.prevent='' style="height: 180px;">
						<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
							class="uni-fab__item" @click.stop="_onItemClick(item)">
							<image :src="item.image2" class="uni-fab__item-image" mode="aspectFit" />
							<text v-if="suspensionChage" class="uni-fab__item-text" style="color: #333;">{{ item.name }}</text>
						</view>
					</scroll-view>
					<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
				</view>
			</view>
			<view :class="{
			  'uni-fab__circle--leftBottom': leftBottom,
			  'uni-fab__circle--rightBottom': rightBottom,
			  'uni-fab__circle--leftTop': leftTop,
			  'uni-fab__circle--rightTop': rightTop,
			  'uni-fab__content--other-platform': !isAndroidNvue
			}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': suspensionChage?styles.buttonColor:styles.buttonColors, 'bottom': nvueBottom }" @click.stop="_onClick">
				<image class="uni-fab__circle_image" :class="{'uni-fab__plus--active': isShow && content.length > 0}" src="https://pic.bangbangtongcheng.com/static/levitationBall.png" mode=""></image>
			</view>
		</view>
		  </movable-view>
		</movable-area>
		<view class="fabuZbc" v-if="fabuZbc" @touchmove.stop.prevent="">
			<view class="fabuZbc_sj">
				<template v-if="userInfo.businessType==1">
					<view class="fzView" v-if="userInfo.shopType!=2">
						<image src="https://pic.bangbangtongcheng.com/static/fabu_c.png" @click="fabuClick(1)" />
						<p>卖房</p>
					</view>
					<view class="fzView" v-if="userInfo.shopType!=2 ">
						<image src="https://pic.bangbangtongcheng.com/static/fabu_z.png" @click="fabuClick(2)" />
						<p>租房</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == '1'">
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png" @click="fabuClick(11)" />
						<p>招全职</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == '1'">
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png" @click="fabuClick(12)" />
						<p>招兼职</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '1'">
						<image src="/static/2house-info.png" @click="fabuClick(3)" />
						<p>公司资料</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '2'">
						<image src="/static/2house-info.png" @click="fabuClick(5)" />
						<p>楼盘轮播</p>
					</view>
					<view class="fzView">
						<image src="/static/byq01.png" @click="fabuClick(7)" />
						<p>帮友圈</p>
					</view>
				</template>
				<template v-else-if="userInfo.businessType==2">
					
					<view class="fzView" v-if="userInfo.shopType==1 || userInfo.shopType==2">
						<image src="/static/mc01.png" @click="fabuClick(9)" />
						<p>卖车</p>
					</view>
					<view class="fzView" v-if="userInfo.shopType==3 || userInfo.shopType==4">
						<image src="/static/fwxm01.png" @click="fabuClick(8)" />
						<p>服务项目</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop==1&& userInfo.shopType!=3 && userInfo.shopType!=4">
						<image src="/static/zscx01.png" @click="fabuClick(10)" />
						<p>在售车系</p>
					</view>
					<view class="fzView">
						<image src="/static/byq01.png" @click="fabuClick(7)" />
						<p>帮友圈</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == 1">
						<image src="/static/2house-info.png" @click="fabuClick(3)" />
						<p>公司资料</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == '1'">
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png" @click="fabuClick(11)" />
						<p>招全职</p>
					</view>
					<view class="fzView" v-if="userInfo.isShop == '1'">
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png" @click="fabuClick(12)" />
						<p>招兼职</p>
					</view>
				</template>
				<template v-else>
					<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
						<image src="https://pic.bangbangtongcheng.com/static/fabu_c.png" @click="fabuClick(1)" />
						<p>卖房</p>
					</view>
					<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
						<image src="https://pic.bangbangtongcheng.com/static/fabu_z.png" @click="fabuClick(2)" />
						<p>租房</p>
					</view>
					<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
						<image src="/static/mc01.png" @click="fabuClick(9)" />
						<p>卖车</p>
					</view>
					<view class="fzView" >
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png" @click="fabuClick(11)" />
						<p>招全职</p>
					</view>
					<view class="fzView">
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png" @click="fabuClick(12)" />
						<p>招兼职</p>
					</view>
					<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
						<image src="https://pic.bangbangtongcheng.com/static/bbzc/writeResume.png" @click="fabuClick(13)" />
						<p>写简历</p>
					</view>
					<view class="fzView">
						<image src="/static/byq01.png" @click="fabuClick(7)" />
						<p>帮友圈</p>
					</view>
					<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus == 1">
						<image src="/static/2house-info.png" @click="fabuClick(3)" />
						<p>公司资料</p>
					</view>
				</template>
				<view class="show" @click="fabu_guan">
					<image style="width: 100%; height: 100%" src="https://pic.bangbangtongcheng.com/static/guanbi.png">
					</image>
				</view>
			</view>
		</view>
		
		<view class="mapbuZbc" v-if="storeApprove" @touchmove.stop.prevent="">
		  <view class="mapView">
		    <image
		      src="https://pic.bangbangtongcheng.com/static/fabu_c.png"
		      @click="storeApproveSeek(1)"
		    />
		    <p>认证房产店铺</p>
		  </view>
		  <view class="mapView">
		    <image
		      src="https://pic.bangbangtongcheng.com/static/bbcz/dtzc01.png"
		      @click="storeApproveSeek(2)"
		    />
		    <p>认证汽车店铺</p>
		  </view>
		  <view class="mapView" v-if="userInfo.enterpriseRecruitmentStatus == 0">
		    <image
		      src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png"
		      @click="storeApproveSeek(3)"
		    />
		    <p>认证招聘企业</p>
		  </view>
		  <view class="show" @click="storeApprove=false">
		    <image
		      style="width: 100%; height: 100%"
		      src="https://pic.bangbangtongcheng.com/static/guanbi.png"
		    ></image>
		  </view>
		</view>
	</view>
</template>

<script>
	let platform = 'other'
	// #ifdef APP-NVUE
	platform = uni.getSystemInfoSync().platform
	// #endif
	/**
	 * Fab 悬浮按钮
	 * @description 点击可展开一个图形按钮菜单
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=144
	 * @property {Object} pattern 可选样式配置项
	 * @property {Object} horizontal = [left | right] 水平对齐方式
	 * 	@value left 左对齐
	 * 	@value right 右对齐
	 * @property {Object} vertical = [bottom | top] 垂直对齐方式
	 * 	@value bottom 下对齐
	 * 	@value top 上对齐
	 * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
	 * 	@value horizontal 水平显示
	 * 	@value vertical 垂直显示
	 * @property {Array} content 展开菜单内容配置项
	 * @property {Boolean} popMenu 是否使用弹出菜单
	 * @event {Function} trigger 展开菜单点击事件，返回点击信息
	 * @event {Function} fabClick 悬浮按钮点击事件
	 */
	export default {
		name: 'UniFab',
		emits: ['fabClick', 'trigger'],
		props: {
			// 悬浮球位置：1.左上角 2.右上角 3.左下角 4.右下角
			 position: {
			     type: Number,
			     default: 4
			 },
			pattern: {
				type: Object,
				default () {
					return {}
				}
			},
			horizontal: {
				type: String,
				default: 'right'
			},
			vertical: {
				type: String,
				default: 'bottom'
			},
			direction: {
				type: String,
				default: 'vertical'
			},
			show: {
				type: Boolean,
				default: false
			},
			popMenu: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				fabShow: false,
				storeApprove:false,
				isShow: false,
				fabuZbc:false,
				userInfo:uni.getStorageSync("Pduser"),
				isAndroidNvue: platform === 'android',
				styles: {
					color: '#3c3e49',
					selectedColor: '#007AFF',
					backgroundColor: '#fff',
					buttonColor: '#fff',
					buttonColors:'transparent',
					iconColor: '#fff'
				},
				isFirst: true, // 首次不走onchange事件
				// 判断悬浮框出现没有
				suspensionChage:false,
				content:[],
				timer: null,
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
				    x: 0,
				    y: 0
				}
			}
		},
		computed: {
			contentWidth(e) {
				return 5 * 55 +40 + 'px'
			},
			contentWidthMin() {
				return '55px'
			},
			// 动态计算宽度
			boxWidth() {
				return this.getPosition(3, 'horizontal')
			},
			// 动态计算高度
			boxHeight() {
				return this.getPosition(3, 'vertical')
			},
			// 计算左下位置
			leftBottom() {
				return this.getPosition(0, 'left', 'bottom')
			},
			// 计算右下位置
			rightBottom() {
				return this.getPosition(0, 'right', 'bottom')
			},
			// 计算左上位置
			leftTop() {
				return this.getPosition(0, 'left', 'top')
			},
			rightTop() {
				return this.getPosition(0, 'right', 'top')
			},
			flexDirectionStart() {
				return this.getPosition(1, 'vertical', 'top')
			},
			flexDirectionEnd() {
				return this.getPosition(1, 'vertical', 'bottom')
			},
			horizontalLeft() {
				return this.getPosition(2, 'horizontal', 'left')
			},
			horizontalRight() {
				return this.getPosition(2, 'horizontal', 'right')
			},
			// 计算 nvue bottom
			nvueBottom() {
				const safeBottom = uni.getSystemInfoSync().windowBottom;
				// #ifdef APP-NVUE
				return 30 + safeBottom
				// #endif
				// #ifndef APP-NVUE
				return 30
				// #endif
			}
		},
		watch: {
			pattern: {
				handler(val, oldVal) {
					this.styles = Object.assign({}, this.styles, val)
				},
				deep: true
			}
		},
		created() {
		    // 获取系统信息
		    uni.getSystemInfo({
		        success: (res) => {
		            console.log("可视区域宽高",res.windowWidth,res.windowHeight); // 320 504
		            this.x1 = 0;
		            this.x2 = parseInt(res.windowWidth) - 50;
		            this.y1 = 0;
		            this.y2 = parseInt(res.windowHeight) - 20;
		            // console.log("49 x2 y2",this.x2,this.y2,'----',this.position); //270 484
		            if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
		            else if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
		            if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
		            else if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
		            this.move.x = this.x;
		            this.move.y = this.y;
		        }
		    })
			this.isShow = this.show
			if (this.top === 0) {
				this.fabShow = true
			}
			// 初始化样式
			this.styles = Object.assign({}, this.styles, this.pattern)
			this.getData();
		},
		mounted() {
		},
		methods: {
			storeApproveSeek(index){
				if (this.inReview) {
					this.storeApprove = false;
					uni.showToast({
						title: '当前已有认证审核中，请耐心等候！',
						icon: "none",
						mask: true
					});
					return;
				}
				if (index==1) {
					uni.navigateTo({
						url: "/pages_my/enter_merchant"
					});
				} else if(index == 2){
					uni.navigateTo({
						url: "/pages_owner/my/shopCertification"
					});
				}else{
					uni.navigateTo({
						url: "/pages_recruitMoney/my/shopCertification"
					});
				}
				this.storeApprove = false;
			},
		    onChange(e) {
				if (this.isFirst) {
					this.isFirst = false;
					return;
				}
				if(Math.abs(e.detail.x - this.move.x)>10 || Math.abs(e.detail.y - this.move.y)>10){
					if(this.isShow){
						this.isShow = false
						this.suspensionChage = false
					}
				}
                this.move.x = e.detail.x;
                this.move.y = e.detail.y;
            },
            // 抬起触发事件
            onTouchend() {
                this.x = this.move.x;
                this.y = this.move.y;
                this.timer = setTimeout(() => {
                    if (this.move.x < this.x2/2) {
                        this.x = this.x1;
                    }else{
                        this.x = this.x2;
                    }
                }, 30)
            },
			// 获取悬浮球数据
			getData(){
				let arr=[]
				let xarr= []
				let sarr=[
					{
						name:"帮帮安巢",
						image2:"https://pic.bangbangtongcheng.com/static/LevitationBall/Acol.png",
						path:"/pages_index/bigIndex"
					},
					{
						name:"帮帮车主",
						image2:"https://pic.bangbangtongcheng.com/static/LevitationBall/Owner.png",
						path:"/pages_owner/index/index"
					},
					{
						name:"帮帮招才",
						image2:"https://pic.bangbangtongcheng.com/static/LevitationBall/recruitTalents.png",
						path:"/pages_recruitMoney/index/index"
					}]
				arr=uni.getStorageSync("whatLike")
				if (arr) {
					arr.forEach(v=>{
						if (v.sign) {
							xarr.push(v)
						}
					})
				}
				this.content=[...sarr,...xarr]
			},
			_onClick() {
				this.$emit('fabClick')
				if (!this.popMenu) {
					return
				}
				this.isShow = !this.isShow
				this.suspensionChage=!this.suspensionChage
			},
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
			},
			/**
			 * 按钮点击事件
			 */
			_onItemClick(item) {
				this._onClick()
				if(item.name == "地图找车"){
					uni.navigateTo({
						// #ifdef APP
						url: "/pages/mapFind/Map"
						//#endif
						// #ifndef APP
						url: "/pages_mapFind/mapHouse"
						//#endif
					});
					return
				}else if(item.name == "地图找房"){
					uni.navigateTo({
						// #ifdef APP
						url: "/pages/index/Map",
						//#endif
						// #ifndef APP
						url: "/pages_index/mapHouse"
						//#endif
					});
					return
				}else if(item.name == "地图招才"){
					uni.navigateTo({
						// #ifdef APP
						url: "/pages/zcMapFind/Map",
						//#endif
						// #ifndef APP
						url: "/pages_mapFind/zcMapHouse"
						//#endif
					});
					return
				}else if(item.id==26 || item.id==28){
					uni.switchTab({
						url: item.path
					});
					return
				}else if(item.id==27){
					this.fabuZbc = true
					return
				}
				uni.navigateTo({
					url: item.path
				});
			},
			home(){
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			/**
			 * 获取 位置信息
			 */
			getPosition(types, paramA, paramB) {
				if (types === 0) {
					return this.horizontal === paramA && this.vertical === paramB
				} else if (types === 1) {
					return this.direction === paramA && this.vertical === paramB
				} else if (types === 2) {
					return this.direction === paramA && this.horizontal === paramB
				} else {
					return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
				}
			},
			fabuClick(num) {
				if (!this.userInfo.phone) {
					uni.showToast({
						title: "请登录",
						icon: "none",
						mask: true,
					});
					return;
				}
				if (num == 1) {
					uni.navigateTo({
						url: "/pages_houses/housing/salesType",
					});
				} else if (num == 2) {
					// uni.navigateTo({
					// 	url: "/pages_release/tenement",
					// });
					uni.navigateTo({
						url: "/pages_houses/housing/salesType?fromType="+'tenement',
					});
				} else if (num == 3) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=1",
					});
				} else if (num == 4) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=2",
					});
				} else if (num == 5) {
					if(!this.userInfo.buildingsId){
						uni.showToast({
							title: '您还未发布楼盘，请前往PC端发布楼盘！',
							icon: "none",
							mask: true
						});
						return
					}
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=3",
					});
				} else if (num == 6) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=4",
					});
				} else if (num == 7) {
					uni.navigateTo({
						url: "/pages_owner/release/releaseFriends",
					});
				} else if (num == 8) {
					uni.navigateTo({
						url: "/pages_owner/release/servicesAvailable",
					});
				} else if (num == 9) {
					uni.navigateTo({
						url: "/pages_owner/release/sellCar",
					});
				} else if (num == 10) {
					uni.navigateTo({
						url: "/pages_owner/release/saleCarSeries",
					});
				}else if (num == 11) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/publishFullTime",
					});
				}else if (num == 12) {
					if(this.userInfo.businessType == 0&& this.userInfo.enterpriseRecruitmentStatus == 0){
					// businessType = 0&& enterpriseRecruitmentStatus == 0为普通用户，businessType = 0 && enterpriseRecruitmentStatus == 1为企业
						 this.$myRequest
						 	.get("/api/mobile/personnelOwner/getPersonalAuthenticationByUserId", {
						 		userId: this.userInfo.id,
						 	})
						 	.then((res) => {
						 		if(res.code === 200){
						 			if(res.personalCertification && (res.personalCertification.auditStatus === '0' ||res.personalCertification.auditStatus === '2')){
						 				uni.navigateTo({
						 					url: "/pages_recruitMoney/my/certificationInformation"
						 				});
						 			}else{
						 				uni.navigateTo({
						 					url: "/pages_recruitMoney/publish/publishConcurrently",
						 				});
						 			}
						 		}
						 	});
						
					}else{
						uni.navigateTo({
							url: "/pages_recruitMoney/publish/publishConcurrently",
						});
					}
				}else if (num == 13) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/writeResume",
					});
				}
				this.fabuZbc = false;
			},
			fabu_guan() {
				this.fabuZbc = false;
			},
		},
		 beforeDestroy() {
		     clearTimeout(this.timer);
		}
	}
</script>

<style lang="scss" >
	$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
	.movableArea {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 100;
        .movableView {
            pointer-events: auto; //可以点击
            width: 55px;
            height:55px;
        }
		}
	.uni-fab {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		z-index: 997;
		border-radius: 45px;
	}
	.uni-fab-shadow{
		box-shadow: $uni-shadow-base;
	}
	.uni-cursor-point {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.uni-fab--active {
		opacity: 1;
	}

	.uni-fab--leftBottom {
		left: 15px;
		bottom: 30px;
		/* #ifdef H5 */
		left: calc(15px + var(--window-left));
		bottom: calc(30px + var(--window-bottom));
		/* #endif */
	}

	.uni-fab--leftTop {
		left: 15px;
		top: 30px;
		/* #ifdef H5 */
		left: calc(15px + var(--window-left));
		top: calc(30px + var(--window-top));
		/* #endif */
	}

	.uni-fab--rightBottom {
		right: 0;
		bottom: 0;
		/* #ifdef H5 */
		right: calc(var(--window-right));
		bottom: calc(var(--window-bottom));
		/* #endif */
	}

	.uni-fab--rightTop {
		right: 15px;
		top: 60px;
		/* #ifdef H5 */
		right: calc(15px + var(--window-right));
		top: calc(60px + var(--window-top));
		/* #endif */
	}

	.uni-fab__circle {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		background-color: #3c3e49;
		border-radius: 45px;
		z-index: 998;
	}
	.uni-fab__circle_image{
		width: 40px;
		height: 40px;
		transform: rotate(0deg);
		transition: transform 0.5s;
	}

	.uni-fab__circle--leftBottom {
		left: 15px;
		bottom: 30px;
		/* #ifdef H5 */
		left: calc(15px + var(--window-left));
		bottom: calc(30px + var(--window-bottom));
		/* #endif */
	}

	.uni-fab__circle--leftTop {
		left: 15px;
		top: 30px;
		/* #ifdef H5 */
		left: calc(15px + var(--window-left));
		top: calc(30px + var(--window-top));
		/* #endif */
	}

	.uni-fab__circle--rightBottom {
		// right: 15px;
		// bottom: 130px;
		// /* #ifdef H5 */
		// right: calc(15px + var(--window-right));
		// bottom: calc(130px + var(--window-bottom));
		// /* #endif */
	}

	.uni-fab__circle--rightTop {
		right: 15px;
		top: 60px;
		/* #ifdef H5 */
		right: calc(15px + var(--window-right));
		top: calc(60px + var(--window-top));
		/* #endif */
	}

	.uni-fab__circle--left {
		left: 0;
	}

	.uni-fab__circle--right {
		right: 0;
	}

	.uni-fab__circle--top {
		top: 0;
	}

	.uni-fab__circle--bottom {
		bottom: 0;
	}

	.uni-fab__plus {
		font-weight: bold;
	}
	.fab-circle-icon {
		transform: rotate(0deg);
		transition: transform 1s;
		font-weight: 200;
	}

	.uni-fab__plus--active {
		transform: rotate(360deg);
	}

	.uni-fab__content {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		/* #endif */
		flex-direction: row;
		border-radius: 55px;
		overflow: hidden;
		transition-property: width, height;
		transition-duration: 0.2s;
		width: 55px;
		border-color: #DDDDDD;
		border-width: 1rpx;
		border-style: solid;
	}

	.uni-fab__content--other-platform {
		border-width: 0px;
		// box-shadow:0 1px 5px 2px rgba(255,255, 255, 0.3);
	}

	.uni-fab__content--left {
		justify-content: flex-start;
	}

	.uni-fab__content--right {
		justify-content: flex-end;
	}

	.uni-fab__content--flexDirection {
		flex-direction: column;
		justify-content: flex-end;
	}

	.uni-fab__content--flexDirectionStart {
		flex-direction: column;
		justify-content: flex-start;
	}

	.uni-fab__content--flexDirectionEnd {
		flex-direction: column;
		justify-content: flex-end;
	}

	.uni-fab__item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		opacity: 0;
		transition: opacity 0.5s;
		margin-bottom: 10rpx;
	}

	.uni-fab__item--active {
		opacity: 1;
	}

	.uni-fab__item-image {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 4px;
	}

	.uni-fab__item-text {
		color: #FFFFFF;
		font-size: 12px;
		line-height: 12px;
		margin-top: 2px;
	}

	.uni-fab__item--first {
		width: 55px;
	}
	.fabuZbc {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999999999;
		.fabuZbc_sj{
			width: 100%;
			position: absolute;
			top: 40%;
			left: 0;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.fzView{
				width: 25%;
				text-align: center;
				margin-top: 20rpx;
				image {
					width: 120rpx;
					height: 120rpx;
				}
				
				p {
					width: 100%;
					font-size: 35rpx;
					color: #fff;
					text-align: center;
					margin-top: 24rpx;
					white-space: nowrap;
				}
			}
			.show {
				position: absolute;
				width: 58rpx;
				height: 58rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: -100rpx;
			}
		}
	}
	
	.mapbuZbc {
	  position: fixed;
	  width: 100%;
	  top: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.7);
	  display: flex;
	  justify-content: center;
	  z-index: 999999999;
	
	  .mapView {
	    padding: 0 28rpx;
	  }
	
	  view {
	    display: inline-block;
	    position: relative;
	    margin-top: 75%;
	    text-align: center;
	    image {
	      // width: 130rpx;
	      // height: 130rpx;
	      width: 120rpx;
	      height: 120rpx;
	    }
	
	    p {
	      width: 100%;
	      // font-size: 40rpx;
	      font-size: 35rpx;
	      color: #fff;
	      text-align: center;
	      margin-top: 24rpx;
	      white-space: nowrap;
	    }
	  }
	
	  .show {
	    position: absolute;
	    width: 58rpx;
	    height: 58rpx;
	    left: 50%;
	    transform: translateX(-43%);
	    top: 270rpx;
	  }
	}
</style>
